﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>监听变量的变化</title>
	<meta charset="utf-8" />
    <link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/angular.js/1.7.0/angular.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/artDialog/7.0.0/dialog-plus.js"></script>
</head>
<body ng-app="myApp" ng-controller="Controller">
    <script type="text/javascript">
        function showDialog() {
            dialog({
                title: "从其他页面输入"
                , url: "Watcher-Input.html"
                , width: 400
                , height: 80
            }).show();
        };
        function showDialog2() {
            dialog({
                title: "从其他页面输入"
                , url: "052Watcher-Array.html"
                , width: 800
                , height: 600
            }).show();
        };

            
        function Controller($scope) {
            var self = $scope;
            self.InputValue = "等待输入...";
            self.InputDescription = "等待生效...";
            $scope.$watch("InputValue", function () {
                setTimeout(function () {
                    self.InputDescription = "等待生效..."
                    self.$apply();
                }, 1000);
            });
        };

        var myApp = angular.module("myApp", []);
        myApp.controller("Controller", Controller);
    </script>
    <fieldset>
        <legend>操作</legend>
        <div>
            <button type="button" onclick="showDialog()" class="btn btn-primary">普通监听</button>
            <button type="button" onclick="showDialog2()" class="btn btn-primary">监听数组</button>
        </div>
    </fieldset>
    <fieldset>
        <legend>输入结果:</legend>
        {{InputValue}}
        <div>
            <p ng-repeat="row in InputArray"><span >{{row.Id}}</span><span>{{row.Name}}</span></p>
        </div>
    </fieldset>
    <fieldset>
        <legend>说明:</legend>
        {{InputDescription}}
    </fieldset>

</body>
</html>
